<template>
  <div>
    <div v-if="list.length">
      <Waterfall :list="list" @clickItem="handleClickItem" />
      <LoadMore :status="loadMoreStatus" @loadmore="handleLoadMore" />
    </div>
    <SkltGrd v-else />
  </div>
</template>

<script setup lang="ts">
import type { LoadMoreStatus } from "@/enums/loadMore";

interface Props {
  list: any[];
  loadMoreStatus: LoadMoreStatus;
}

defineProps<Props>();
const emit = defineEmits(["clickItem", "loadmore"]);
const handleClickItem = (item: any) => {
  emit("clickItem", item);
};

const handleLoadMore = () => {
  emit("loadmore");
};
</script>
